<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="img" src="" alt="">
    <script>
        const img = document.getElementById("img")
        const ws = new WebSocket("ws://192.168.137.11:3000")
        ws.onmessage = (e) => {
            const data = JSON.parse(e.data)
            img.src = `data:image/png;base64,${data.base64}`;
            img.width = data.width;
            img.height = data.height;
        }
        const handle = (e) => {
            // 传递事件类型与坐标轴信息
            ws.send(JSON.stringify({
                type: e.type,
                x: e.offsetX,
                y: e.offsetY
            }))
        }
        img.onclick = handle;
        img.ondblclick = handle;
        img.onkeydown = handle;
        img.onmousemove = handle;
    </script>
</body>

</html>